<template>
  <div class="CompanyList">
    <div class="CompanyList-nav">
      <van-nav-bar>
        <template #left>
          <img src="../assets/img/arrow.png" alt class="arrow" @click="backHome" />
          <span>企业档案</span>
        </template>
        <template #right>
          <!-- <img v-show="isList" @click="isList = !isList"
               src="../assets/img/list.png" alt="">
          <img v-show="!isList" @click="isList = !isList"
          src="../assets/img/card.png" alt="">-->
          <img src="../assets/img/select.png" @click="isSelect = true" class="select" alt />
        </template>
      </van-nav-bar>
    </div>
    <!--弹出层-->
    <van-popup v-model="isSelect" position="right" :style="{ width: '76%', height: '100%' }">
      <div style="margin-top:20px;">
        <van-search v-model="params.recordName" placeholder="请输入搜索关键词" />
      </div>
      <div class="CompanyList-popup">
        <div class="CompanyList-popup-title">分类</div>
        <div class="CompanyList-popup-list">
          <div
            class="item"
            v-for="(item, index) in works"
            :key="index"
            @click="selectWork(index)"
            :class="{'active': item.isSelect}"
          >{{item.name}}</div>
        </div>
        <div class="CompanyList-popup-title">省份</div>
        <div class="CompanyList-popup-list">
          <div
            class="item"
            v-for="(item, index) in provinces"
            :key="index"
            @click="selectProvince(index)"
            :class="{'active': item.isSelect}"
          >{{item.name}}</div>
        </div>
        <div class="CompanyList-popup-title">城市</div>
        <div class="CompanyList-popup-list">
          <div
            class="item"
            v-for="(item, index) in locations"
            :key="index"
            @click="selectLocation(index)"
            :class="{'active': item.isSelect}"
          >{{item.name}}</div>
        </div>
        <div class="CompanyList-popup-btns">
          <div @click="resetBtn">重置</div>
          <div @click="sureBtn">确认</div>
        </div>
      </div>
    </van-popup>
    <div class="CompanyList-content" v-show="isList">
      <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
        <!-- <div class="CompanyList-content-item" @click="skipRouter({path:'/companyDetail',query:{recordId:item.recordId}})" v-for="(item, index) in recordList" :key="index">
              <div class="title">
                {{item.recordName}}
              </div>
              <div class="newsAbsrtact">
                {{item.workExperience}}
              </div>
              <div class="tagAndTime">
                <div class="tag">
                  <van-tag v-show="index<9" plain type="danger" size="medium">置顶</van-tag>
                </div>
                <div class="time">
                </div>
              </div>
              <van-divider />
        </div>-->
        <company-record-item :list="recordList"></company-record-item>
      </van-list>
    </div>
    <!--查看更多-->
    <!-- <div class="home-more">
      <van-divider :style="{ color: '#0050A5', borderColor: '#BFBFBF', padding: '0 16px' }">查看更多</van-divider>
    </div>-->
  </div>
</template>

<script>
import provinceJson from '@/utils/provinceJson'
import companyRecordItem from '@/components/record/companyRecordItem'
export default {
  name: 'CompanyList',
  components: {
    companyRecordItem,
  },
  created() {
    this.provinces = provinceJson
  },
  data() {
    return {
      isList: true,
      isSelect: false,
      loading: false,
      finished: false,
      locations: [
        {
          name: '',
          isSelect: false,
        },
      ],
      provinces: [
        {
          name: '',
          isSelect: false,
        },
      ],
      works: [
        {
          name: '材料企业',
          isSelect: false,
        },
        {
          name: '设计企业',
          isSelect: false,
        },
        {
          name: '施工企业',
          isSelect: false,
        },
        {
          name: '住宅企业',
          isSelect: false,
        },
        {
          name: '科技企业',
          isSelect: false,
        },
      ],
      recordList: [],
      total: 0,
      params: {
        page: 0,
        pageSize: 10,
        type: 1,
        recordName: '',
      },
      currendProvinceIndex: 0,
    }
  },
  methods: {
    backHome() {
      this.$router.back()
    },
    selectProvince(index) {
      this.provinces.forEach((item) => {
        item.isSelect = false
      })
      this.provinces[index].isSelect = true
      this.params.companyAddress = this.provinces[index].name
      this.currendProvinceIndex = index
      let arr = this.provinces[index].children
      if (arr[0].name === '市辖区') {
        arr = arr[0].children
      }
      this.locations = arr
    },
    selectLocation(index) {
      this.locations.forEach((item) => {
        item.isSelect = false
      })
      this.locations[index].isSelect = true
      this.params.companyAddress =
        this.provinces[this.currendProvinceIndex].name +
        this.locations[index].name
      this.$forceUpdate()
    },
    selectWork(index) {
      this.works.forEach((item) => {
        item.isSelect = false
      })
      this.works[index].isSelect = true
      this.params.shoolName = this.works[index].name
    },
    resetBtn() {
      this.locations.forEach((item) => {
        item.isSelect = false
      })
      this.provinces.forEach((item) => {
        item.isSelect = false
      })
      this.works.forEach((item) => {
        item.isSelect = false
      })
      this.params.companyAddress = ''
      this.params.shoolName = ''
      this.params.recordName = ''
    },
    sureBtn() {
      this.params.page = 0
      this.findRecordList()
      this.isSelect = false
    },
    skipRouter(routerObj) {
      this.$router.push(routerObj)
    },
    onLoad() {
      this.findRecordList()
    },
    findRecordList() {
      this.params.page++
      this.$request({
        url: '/award/selectRecordList',
        method: 'post',
        data: this.params,
      }).then((rsp) => {
        if (rsp.code === 200) {
          if (this.params.page === 1) {
            this.recordList = rsp.data.list
          } else {
            this.recordList.splice(-1, 0, ...rsp.data.list)
          }
          this.loading = false
          if (this.recordList.length >= rsp.data.total) {
            this.finished = true
          } else {
            this.finished = false
          }
        } else {
          this.$toast.fail(rsp.content)
        }
      })
    },
  },
}
</script>

<style lang='scss'>
@import '../assets/css/base';

.CompanyList {
  background-color: rgb(242, 242, 242);
  overflow: hidden;
  &-nav {
    img {
      width: px2rem(42);
      height: px2rem(42);
      &.select {
        margin-left: px2rem(33);
      }
    }
    span {
      font-size: px2rem(36);
      color: #000000;
      font-weight: 400;
      padding-left: px2rem(26);
    }
  }
  &-content {
    width: px2rem(690);
    margin: 0 auto;
    // overflow: hidden;
    // .van-hairline--top-bottom{
    //   border: none !important;
    // }
    // &-item{
    //   margin-top: px2rem(40);
    //   .title{
    //     font-size: px2rem(38);
    //     color: #000000;
    //     line-height: px2rem(60);
    //     // font-weight: 400;
    //   }
    //   .newsAbsrtact{
    //     color: #969799;
    //     font-size: px2rem(32);
    //     line-height: px2rem(52);
    //     overflow: hidden;
    //     text-overflow: ellipsis;
    //     word-break: break-all;
    //     -webkit-line-clamp: 3;
    //     -webkit-box-orient: vertical;
    //     display: -webkit-box;
    //     margin-top: px2rem(10);
    //   }
    //   .tagAndTime{
    //     display:flex;
    //     justify-content: space-between;
    //     line-height: px2rem(40);
    //     .time{
    //       font-size: px2rem(28);
    //       color: #969799;
    //       padding-top: px2rem(24);
    //       padding-right:px2rem(20);
    //     }
    //   }
    // }
  }
  &-cards {
    width: px2rem(710);
    margin: px2rem(20) auto;
    @include flex();
    flex-wrap: wrap;
    &-item {
      width: px2rem(345);
      height: px2rem(283);
      margin-bottom: px2rem(20);
      background-color: #fff;
      & > img {
        width: px2rem(345);
        height: px2rem(227);
        border-radius: px2rem(5);
      }
      & > p {
        font-size: px2rem(26);
        color: #000000;
        line-height: 1.5;
        margin-left: px2rem(10);
      }
    }
  }
  &-popup {
    width: px2rem(503);
    margin: 0 auto;
    height: 100%;
    padding-top: px2rem(24);
    &-title {
      margin-top: px2rem(36);
      margin-bottom: px2rem(32);
      font-size: px2rem(28);
      color: #000000;
      &:first-child {
      }
    }
    &-list {
      display: flex;
      flex-wrap: wrap;
      & > .item {
        width: px2rem(147);
        height: px2rem(53);
        margin-right: px2rem(31);
        background: rgba(242, 242, 242, 1);
        border-radius: px2rem(5);
        line-height: px2rem(53);
        text-align: center;
        font-size: px2rem(22);
        color: #929292;
        margin-bottom: px2rem(24);
        &:nth-child(3n) {
          margin-right: 0;
        }
        &.active {
          background: rgba(0, 80, 165, 0.1);
          color: #0050a5;
        }
      }
    }
    &-btns {
      margin-top: px2rem(80);
      margin-bottom: px2rem(40);
      @include flex();
      & > div {
        &:first-child {
          width: px2rem(234);
          height: px2rem(60);
          border: px2rem(1) solid rgba(0, 80, 165, 1);
          border-radius: px2rem(30);
          background-color: #fff;
          text-align: center;
          line-height: px2rem(60);
          color: $mainColor;
          font-size: px2rem(28);
        }
        &:last-child {
          width: px2rem(234);
          height: px2rem(60);
          background: rgba(0, 80, 165, 1);
          border-radius: px2rem(30);
          text-align: center;
          line-height: px2rem(60);
          font-size: px2rem(30);
          color: #ffffff;
        }
      }
    }
  }
}
</style>
